CMS: Использование элементов ввода для фильтрации контента посетителями
14 мин.
Используйте элементы ввода, такие как выпадающие списки или радиокнопки, чтобы предоставить посетителям сайта возможность фильтровать контент, который появляется в репитерах, галереях и таблицах. В этой статье рассказывается, как подключить элементы ввода к набору данных, который связывает коллекцию CMS (системы управления контентом) с контентом на опубликованном сайте.
Каждый элемент ввода подключается к определенному полю коллекции, чтобы показать уникальные значения этого поля в качестве вариантов фильтрации. Когда посетители выбирают вариант фильтра, в подключенном репитере, галерее или таблице появляются только пункты с соответствующим значением поля. Кроме того, вы можете добавить условный фильтр, который меняет поведение фильтрации. Например, можно добавить условие «Не является», чтобы создать фильтр, отображающий пункты, которые не соответствуют выбору посетителя.
По умолчанию, когда посетители выбирают фильтр, контент меняется мгновенно. Однако вы можете добавить кнопку «Применить фильтр», если хотите, чтобы фильтры посетителей применялись только после нажатия отдельной кнопки. Вы также можете добавить кнопку сброса, нажав на которую посетители смогут мгновенно очистить все установленные ими фильтры.
Прежде чем начать:
- Добавьте CMS (систему управления контентом) на сайт, если вы еще этого не сделали.
- Подключите репитер, галерею или таблицу к коллекции CMS.
Шаг 1 | Добавление элементов ввода для фильтрации контента
Перейдите в редакторе на страницу, где вы хотите, чтобы посетители фильтровали контент, который отображается в репитере, галерее или таблице. Затем добавьте элементы ввода, которые посетители будут использовать для фильтрации. Если вы добавите несколько элементов ввода, вы сможете настроить каждый из них на фильтрацию по разным полям коллекции.
Вы можете выбрать один из следующих элементов ввода, поддерживающих фильтрацию: Радиокнопки, Чекбоксы, Выпадающий список, Теги выбора или Ползунок (только диапазонные ползунки). Обратите внимание, что каждый элемент ввода имеет ограничения по типам полей, которые он может фильтровать.
редактор Wix
Редактор Studio
- Перейдите в редактор.
- Перейдите на страницу с репитером, галереей или таблицей, для которых вы хотите настроить фильтрацию.
- Нажмите Добавить элементы
слева в Редакторе. - Нажмите Ввод.
- В разделе Выбор выберите тип элемента ввода, который посетители будут использовать для фильтрации контента. Выберите один из следующих элементов, поддерживающих фильтрацию: Радиокнопки, Чекбоксы, Выпадающий список, Теги выбора или Ползунок (только диапазонные ползунки)
- Перетащите нужный элемент ввода на страницу.
- (Необязательно) Повторите шаги 3–6 выше, чтобы добавить другие элементы ввода, которые посетители будут использовать для фильтрации контента.
Шаг 2 | Подключение элементов ввода к CMS
Подключите каждый элемент ввода к тому же набору данных, который подключен к репитеру, галерее или таблице. Затем выберите поле коллекции, по которому каждый элемент ввода будет фильтровать контент. В элементах ввода будут отображаться все уникальные значения из подключенного поля коллекции. Когда посетитель делает выбор в элементе ввода, в репитере, галерее или таблице отображаются только те пункты, которые соответствуют выбранному полю.
Вы также можете добавить условную фильтрацию. Например, добавьте условия «Не является», «Не равно» или «Не включает» , чтобы создать фильтр, который отображает пункты, не соответствующие полю, выбранному посетителем. При добавлении условия к фильтру название поля и текст-подсказка в элементе ввода автоматически обновляются, чтобы посетители понимали, как работает фильтр (например, «Исключить по полю»).
Добавление фильтров и правил сортировки в набор данных также влияет на элементы ввода:
Элементы ввода подключаются к набору данных, который извлекает контент из подключенных полей коллекции. Если вы добавите фильтры в набор данных, чтобы исключить определенные пункты, эти пункты и содержимое их полей не будут переданы в элементы ввода. Это означает, что в элементах ввода будут отображаться только уникальные значения полей тех пунктов, которые включены в набор данных. Условия сортировки набора данных также влияют на порядок отображения вариантов выбора в элементах ввода.
редактор Wix
Редактор Studio
- В редакторе нажмите на элемент ввода, который вы только что добавили.
- Нажмите на иконку Подключить к CMS
. - Нажмите Фильтровать контент.
- Нажмите на выпадающий список Выберите набор данных и выберите тот же набор данных, который подключен к репитеру, галерее или таблице, которые должны фильтровать посетители.
- Нажмите на выпадающий список Фильтровать контент по и выберите поле коллекции, которое посетители будут использовать для фильтрации отображаемого контента.
- (Необязательно) Добавьте условие, влияющее на работу фильтра:
- Нажмите Расширенная фильтрация.
- Нажмите на выпадающий список Условие и выберите оператор, который управляет применением фильтра (например, Не является, Не равно, Не включает).
Примечание: условия меняются в зависимости от типа элемента ввода и типа подключенного поля. Подробности см. в разделе «Условия расширенной фильтрации для каждого элемента ввода» ниже.
- Повторите эти действия для каждого элемента ввода, который посетители будут использовать для фильтрации контента.
- Нажмите Предпросмотр, чтобы протестировать работу элементов ввода в качестве фильтров.
- Нажмите Опубликовать, если вы готовы применить изменения на сайте.
Расширенные условия фильтрации
Нажмите ниже, чтобы просмотреть условия расширенной фильтрации, доступные для каждого элемента ввода:
Выпадающий список и радиокнопки
Теги выбора
Мультичекбоксы
Чекбокс
Ползунок диапазона
(Необязательно) Шаг 3 | Добавьте кнопку для применения фильтров
Если вы хотите, чтобы выбранные посетителями фильтры применялись только после нажатия отдельной кнопки, вы можете создать кнопку «Применить фильтры». Когда посетители нажимают эту кнопку, применяются все выбранные ими фильтры элементов ввода. Без нее фильтры применяются сразу после того, как посетители выбирают их в каждом элементе ввода.
Редактор Wix
Редактор Studio
- Нажмите Добавить элементы
слева в Редакторе. - Нажмите Кнопка.
- Выберите кнопку, которую вы хотите использовать для применения фильтров, и перетащите ее на страницу. Вы можете использовать любой из следующих типов кнопок: Кнопки в стиле шаблона, Кнопки с текстом и иконкой, Кнопки-иконки, или Кнопки-изображения.
Совет: вы также можете добавить изображение и использовать его в качестве кнопки применения фильтров. - Нажмите Изменить текст и введите текст, который должен отображаться на кнопке (например, «Применить фильтры»).
- Нажмите на иконку Подключить к CMS .
- В выпадающем списке Выберите набор данных выберите тот же набор данных, который подключен к репитеру, галерее или таблице.
- В выпадающем списке Действие при клике подключается к выберите Применить фильтры.
- Нажмите на кнопку и выберите иконку Дизайн
, чтобы настроить внешний вид кнопки «Применить фильтры». - Нажмите Превью, чтобы протестировать кнопку «Применить фильтры».
- Нажмите Опубликовать, если вы готовы применить изменения на сайте.
(Необязательно) Шаг 4 | Добавьте кнопку сброса
Вы можете создать кнопку сброса, нажав на которую посетители смогут сбросить все выбранные фильтры элементов ввода. Это позволит посетителям легко начать поиск заново и отфильтровать контент без перезагрузки страницы.
Редактор Wix
Редактор Studio
- Нажмите Добавить элементы слева в Редакторе.
- Нажмите Кнопка.
- Выберите кнопку, которую вы хотите использовать для сброса, и перетащите ее на страницу. Вы можете использовать любой из следующих типов кнопок: Кнопки в стиле шаблона, Кнопки с текстом и иконкой, Кнопки-иконки, или Кнопки-изображения.
Совет: вы также можете добавить изображение и использовать его в качестве кнопки сброса. - Нажмите Изменить текст и введите текст, который должен отображаться на кнопке (например, «Сбросить фильтры»).
- Нажмите на иконку Подключить к CMS .
- В выпадающем списке Выберите набор данных выберите тот же набор данных, который подключен к репитеру, галерее или таблице.
- В выпадающем списке Действие при клике подключается к выберите Сбросить значения ввода.
- Нажмите на кнопку и выберите иконку Дизайн , чтобы настроить внешний вид кнопки сброса.
- Нажмите Предпросмотр, чтобы протестировать кнопку сброса.
- Нажмите Опубликовать, если вы готовы применить изменения на сайте.
Часто задаваемые вопросы
Нажмите ниже, чтобы получить ответы на самые частые вопросы об использовании элементов ввода для фильтрации контента.
Какой режим набора данных и разрешения коллекции следует установить, чтобы разрешить посетителям фильтровать контент?
Можно ли разрешить посетителям фильтровать контент из коллекций приложений Wix?
Могут ли посетители сайта использовать элементы ввода для отправки контента в мою коллекцию?
Устранение неполадок, если фильтры работают некорректно